﻿<template>
  <!--send box s-->
  <div class="login_wrap"  v-bind:class="{ 'change_bg_login_wrap': isActive_bg}" style="background-image: none">
    <div class="login_header clearfix">
        <div class="login_header_left f_L" v-on:click="$goback" v-show="back_hide_data">
        </div>
        <div class="login_header_right f_R"></div>
    </div>
    <div class="contain_wrap_login">
        <router-view @change_bg ="this_change_bg" @change_bg_false="this_change_bg_false" @back_hide="back_hide"></router-view>
    </div>
  </div>
</template>
<script>
import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
import "../../../static/css/Login/login.less";
import { Toast } from 'mint-ui';
import MintUI from 'mint-ui'
import Vue from "vue"
import '../../../static/css/mint-ui/style.css'
import axios from 'axios'
//  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
  Vue.prototype.$http = axios;
  Vue.use(MintUI);
  Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  })
  Vue.directive('focus_ud', {
    // 当绑定元素插入到 DOM 中。
    update: function (el, binding) {
      // 聚焦元素
      if (binding.value == true) {
        el.focus()
      } else {
        el.blur()
      }

      }
  });
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      isActive_bg: false,
      back_hide_data:true
    }
  },
  ...mapActions([
    "thom_redirect",
    "goback"
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  mounted: function () {
    this.isActive_bg = false
  },
  methods: {
    back_hide:function (opt) {
      this.back_hide_data = opt
    },
    //返回
    mui_goback:function(){
      mui.plusReady(function () {
          mui.currentWebview.close();
          mui.back()
       })
    },
    this_change_bg: function (data) {
      this.isActive_bg = true;
    },
    this_change_bg_false: function () {
      this.isActive_bg = false;
    },
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    this_goback:function () {
     this.$store.dispatch("goback",{
         router:this.$router
     });
    }
  }
}
</script>
<style scoped>
  /*忘记密码s*/
  .forget_pwd{
    text-align: center;
    margin:  4vw auto 0;
    font-size:4.5vw;
    color:darkred;
    width: auto;
    float: left;
    margin-left: 10vw;
    text-decoration: underline;
    line-height: 1.5;
  }
  /*忘记密码e
  */
  /*验证码s*/
  .login_header{
    padding-top:5.3vw;
  }
  .time_font_s {
    font-size: 4vw;
  }
  .yanzhem_wrapper{
    position:relative;
  }
  .get_yzm{
    position:absolute;
    right:0;
    top:50%;
    transform:translate(-70%,-50%);
    border:2px solid #9f5c2f;
    border-radius:1vw;
    text-align:center;
    padding:1vw 0.5vw;
    color:#9f5c2f;
    font-size:3vw;
  }
  /*验证码e*/
  .menu_list_len_n {
    font-size: 6vw;
    color: #9f5c2f;
    margin-top: 2vw;
  }
  .mint-indicator-mask {
    z-index: 3000;
  }
  #app .change_bg_login_wrap {
    background-image: url("../../../static/img/bg_input_2.jpg");
    background-size:cover;

  }
  .login_wrap .login_header .login_header_right {
    margin: 0rem 6% 0 0;
  }
  .login_wrap .login_header_left {
    margin: 0rem 0 0 6%;
  }
  .login_wrap {
    /*background-image: url("../../../static/img/bg_input_1.jpg");*/
    height:100%;
    width:100%;
    background-color: #fff;
    /*background-size:cover;*/
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
  .contain_wrap_login{
    width:100%;
    overflow:hidden;
    height:100%;
  }
  .login_wrap{
    overflow:hidden;
  }
  .bottom_left_btn {
   //border-radius: 1vw;
  }
  .login_header_left{
    width:7.4vw;
    height:7.4vw;
    background-repeat:no-repeat;
  }
  .login_wrap .login_header_right {
    width: 12vw;
    height:9vw;
    margin: 1.8rem 6% 0 0;
  }
</style>


